<template>
  <div>
      <!-- active: n % 2 == 0 && index == n,re: n % 2 != 0 && index == n -->
      <!-- if (n % 2 == 0 && index == n) -->
      <!-- 什么叫余数，除不尽的剩余的数字叫余数 -->
    <ul>
      <li v-for="n in 10" :key="n" @click="liClick(n)" 
      :class="{active: n % 2 == 0 && index == n,re: n % 2 != 0 && index == n}">{{ n }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index: 0
    };
  },
  methods: {
      liClick(val){
        this.index = val;
        // console.log(val);
      }
  },
};
</script>
<style lang="scss" scoped>
li {
  list-style: none;
}
.active{
    background: pink;
}
.re{
    background: red;
}
</style>